<template>
	<view>
		<u-popup v-model="open" v-if="open" mode="bottom" height="90%" close-icon-pos="top-right" >
			<view class="box">
				<view class="search">
					<ltSearch v-model="searchValue" @search="search" placeholder="搜索:维修项目,维修编号">
						<slot>
							<u-button style="width: 100%;color:#4F75BE" @click="trig" size="mini">确认</u-button>
						</slot>
					</ltSearch>
				</view>				
				<view class="popup-box">	
					<mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption" top="120rpx">
						<view v-for="(item,index) in list" :key="index" style="margin-top: 16upx;">
							<hourItem :item="item" @getSelect="getSelect"/>
						</view>
					</mescroll-uni>
				</view>			
			</view>			
		</u-popup>
	</view>
</template>

<script>
	import hourItem from './components/hourItem.vue';
	import ltSearch from '@/components/lt-search/index.vue';
	import { getWorkingHours } from '@/api/common.js';
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components:{
			hourItem,
			ltSearch
		},
		computed:{
			btnWidth(){
				return `width:${100/this.btnList.length - 10}%`
			}
		},
		watch:{
			open(v){
				if(v){
					this.selectList = []
				}
			}
		},
		data(){
			return {
				open:false,
				value1:1,
				list:[],
				selectList:[],
				searchValue:'',
				upOption:{
					auto:false
				},
				btnList:[
					{
						label:'取消',
						type:''
					},{
						label:'保存',
						type:'primary',
						plain:true
					}
				]
			}
		},
		methods:{
			search(v){
				this.searchValue = v 
				this.downCallback()
			},
			trig(){
				this.$emit('receiveHours',this.selectList)									
				this.open = false
			},
			getSelect(v){
				// this.selectList.forEach()
				const selectLength = this.selectList.length 
				let newArr = this.selectList.filter(item =>{
					return item.wiId !== v.wiId
				})
				if(newArr.length === selectLength) {
					this.selectList.push(v)
				} else {
					this.selectList = newArr
				}
				console.log('selectList',this.selectList)
			},
			downCallback(){
				this.list = []
				this.mescroll.resetUpScroll( true )
			},
			// 
			async upCallback(page){
				let pageObj = {
					pageIndex:page.num,
					pageSize:page.size,
					searchKey:this.searchValue
				}				
				let res = await getWorkingHours(pageObj)
				if(res.result === '1'){
					this.mescroll.endSuccess(res.rows.length)
					this.list = [...this.list,...res.rows]
				} else {
					this.mescroll.endErr()
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box{
		width: 100%;
		height: 100%;
		background-color:rgb(249,250,254);
		.search{
			width: 100%;
			height: 8vh;
		}
		.popup-box{
			width: 100%;
			height: 80vh;
			padding: 0rpx 16rpx 0 16rpx ;
			overflow: hidden;
			overflow-y: scroll;
		}
		.chooseBtn{
			width: 100%;
			z-index: 1000000000;
			height: 12vh;
			margin-top: 32rpx;
			background-color: #F2f;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding: 0 16rpx 0 16rpx ;
		}
	}
	
</style>
